<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>response watch website</title>
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
    />
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="assets/css/styles.css" />
  </head>
  <body>
    <!-- header -->
    <header id="header" class="header">
      <div class="nav container">
        <a href="#" class="nav-logo">watches</a>
        <div id="nav-menu" class="nav-menu">
          <ul class="nav-list">
            <li class="nav-item">
              <a href="#" class="nav-link">home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">about</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">featured</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">new</a>
            </li>
          </ul>

          <div class="nav-social">
            <a href="#" target="_blank" class="nav-social__link">
              <i class="ri-facebook-circle-line"></i>
            </a>
            <a href="#" target="_blank" class="nav-social__link">
              <i class="ri-instagram-line"></i>
            </a>
            <a href="#" target="_blank" class="nav-social__link">
              <i class="ri-twitter-x-line"></i>
            </a>
          </div>

          <div class="nav-close" id="nav-close">
            <i class="ri-close-line"></i>
          </div>
        </div>

        <div class="nav-toggle" id="nav-toggle">
          <i class="ri-menu-fill"></i>
        </div>
      </div>
    </header>

    <main class="main">
      <!-- home section -->
      <section class="home">
        <div class="home-container container">
          <div class="home-data">
            <div class="home-content">
              <div class="home-stars">
                <i class="ri-star-fill"></i>
                <i class="ri-star-fill"></i>
                <i class="ri-star-fill"></i>
                <i class="ri-star-fill"></i>
                <i class="ri-star-half-fill"></i>
              </div>

              <div class="home-title">
                Baume
                <span>Custom</span>
                <br />
                Timepiece Small
                <br />
                Second
              </div>

              <h3 class="home-price">$620</h3>
            </div>

            <a href="#" class="home-button">
              add to cart
              <i class="ri-arrow-right-s-line"></i>
            </a>
          </div>

          <div class="home-images">
            <div class="home-swiper swiper">
              <div class="swiper-wrapper">
                <article class="home-article swiper-slide">
                  <img src="assets/img/watches-1.png" alt="watch image" class="home-img" />
                </article>
                <article class="home-article swiper-slide">
                  <img src="assets/img/watches-2.png" alt="watch image" class="home-img" />
                </article>
                <article class="home-article swiper-slide">
                  <img src="assets/img/watches-3.png" alt="watch image" class="home-img" />
                </article>
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>

          <div class="home-info">
            <img src="assets/img/watches-border.png" alt="watch border" class="home-info__img" />
            <div class="home-info__content">
              <p class="home-info__description">
                Personalized watches are a job of quality and commitment. Each piece is the result
                of a work of co-creation of innovation and responsible sensitivity for users.
              </p>

              <a href="#" class="home-button__link">learn more</a>
            </div>
          </div>
        </div>
      </section>
    </main>

    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/main.js"></script>
  </body>
</html>
